<template>
    <div class="map-panel-container">
      <!-- Optional: Add a title within the panel if desired -->
      <!-- <div class="map-panel-title">区域人力分布</div> -->
      <div ref="mapRef" class="map-content">
    
      </div>
    </div>
</template>
  
<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  
  interface Location {
    name: string;
    count: number;
    x: number;
    y: number; 
  }
  
  const mapRef = ref<HTMLElement | null>(null);
  

  const locations: Location[] = [
    { name: '锦城公园校区', count: 35, x: 75, y: 35 },
    { name: '芳草校区', count: 24, x: 75, y: 42 },
    { name: '九里堤校区', count: 12, x: 75, y: 49 },
    { name: '高新文化中心校区', count: 10, x: 70, y: 58 },
    { name: '简阳校区', count: 8, x: 88, y: 75 }
  ];
  
  onMounted(() => {
    const mapElement = mapRef.value;
    if (!mapElement) return;
  
    locations.forEach(location => {
      const marker = document.createElement('div');
      marker.className = 'location-marker';
      marker.style.top = `${location.y}%`;
      marker.style.left = `${location.x}%`;
  
      const info = document.createElement('div');
      info.className = 'location-info';
    
      info.textContent = `${location.name}\n人力成本:${location.count}`;
  
      marker.appendChild(info);
      mapElement.appendChild(marker);
    });
  });
  </script>
  
  <style lang="less" scoped>
  @import '../variables.less';
  
  .map-panel-container {
    width: 100%;
    flex-grow: 1; 
    position: relative;
    overflow: hidden;
    border-radius: 5px;
    border: 1px solid @panel-border-color;
    background-color: @panel-bg;
    min-height: 300px; 
    padding: 5px; 
    display: flex; 
    flex-direction: column; 
  }
  

  .map-panel-title {
      font-size: 16px;
      color: #0ce0ff;
      padding: 10px @panel-padding 5px @panel-padding;
      flex-shrink: 0;
     
  }
  
  
  .map-content {
    width: 100%;
    height: 100%;
    flex-grow: 1; 

    background-color: rgba(9, 42, 99, 0.3); // Faint blue bg
    background-size: cover;
    background-position: center;
    position: relative; 
    border-radius: 3px;
  }
  
  
  :deep(.location-marker) {
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: @map-marker-color;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px rgba(0, 225, 255, 0.8);
    cursor: pointer;
    z-index: 1;
  
    &::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background-color: rgba(0, 225, 255, 0.3);
      animation: pulse 2s infinite;
    }
  }
  
  :deep(.location-info) {
    position: absolute;
    background-color: @map-info-bg;
    border: 1px solid @map-info-border;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 12px;
    color: @text-color-light;
    bottom: 15px; // Position below marker
    left: 50%;
    transform: translateX(-50%);
    white-space: pre; // Use 'pre' for newlines
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
    z-index: 10;
  }
  
  :deep(.location-marker:hover .location-info) {
    opacity: 1;
    visibility: visible;
  }
  </style>